<template>
  <div class="container">
    <div class="top-tabs">
      <ul class="flex v-align-c">
        <li class="font-14 flex-item pad-t-9" @click="tabClick(index)"
          v-for="(item, index) in tabs" :key="index">
          <div class="flex flex-center"
            :class="index === 1 ? 'actived' : ''">{{ item }}</div>
        </li>
      </ul>
    </div>
    <div class="height-51"></div>
    <div class="goods-content pad-l-15 pad-r-15">
      <template v-if="!listNone">
        <p>商品名称为3-14个汉字(一个字等于两个英文字符或特殊字符)，超出部分不显示。</p>
        <div class="list">
          <ul>
            <li class="flex mar-b-12" v-for="(item, index) in liveRoomApplyGoodsList" :key="index">
              <img v-if="item.goodsImgUrl" :src="item.goodsImgUrl" class="width-84 height-84 mar-r-9 goods-img" mode="aspectFill" alt="">
              <div class="flex-item pad-t-4">
                <div class="line-2 font-13">{{ item.title }}</div>
                <div class="flex v-align-c font-15 price-bar mar-t-19">
                  <template v-if="!item.minPrice">
                    <div>
                      <span>￥</span>
                      <span class="price">{{ item.price }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div>
                      <span v-if="item.minPrice">￥</span>
                      <span v-if="item.minPrice" class="price">{{ item.minPrice }}</span>
                      <label v-if="item.maxPrice">~</label>
                      <span v-if="item.maxPrice">￥</span>
                      <span v-if="item.maxPrice" class="price">{{ item.maxPrice }}</span>
                    </div>
                  </template>
                  <span class="remove-btn" @click="removeGoods(item, index)">移除</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="add-goods-btn font-13"
          @click="$pt.navigateTo({url: '/pages/home/live-apply/goods-list/main'})">
          <div class="flex flex-center">添加直播商品</div>
        </div>
      </template>
      <div class="nodata" v-if="listNone">
        <div class="align-c">
          <img v-if="fileSpace" class="width-130 height-113" :src="fileSpace + '/images/shop-b-nodata.png'" alt="">
        </div>
        <div class="font-13 font-color-6 text-align-c mar-t-12">暂未设置商品</div>
        <div class="apply-btn" @click="$pt.navigateTo({url: '/pages/home/live-apply/goods-list/main'})">立即添加</div>
      </div>
    </div>
    <template v-if="!listNone">
      <div class="height-54"></div>
      <div class="flex v-align-c text-align-c submit-footer">
        <button class="back-btn" @click="$pt.redirectTo({url: '/pages/home/live-apply/basic-info/main'})">上一步</button>
        <button class="submit-btn" @click="submit">确认提交</button>
      </div>
    </template>
  </div>
</template>
<script>
  import { saveLiveRoomApply } from '@/api/personal'
  export default {
    data() {
      return {
        activeIndex: 0,
        tabs: ['基本设置', '商品设置'],
        liveRoomApplyGoodsList: [],
        listNone: false
      }
    },
    onShow() {
      if (this.$pt.getStorageSync('applyGoodsList')) {
        this.listNone = false
        this.liveRoomApplyGoodsList = this.$pt.getStorageSync('applyGoodsList')
      } else {
        this.listNone = true
      }
    },
    methods: {
      removeGoods(item, index) {
        this.liveRoomApplyGoodsList.forEach((goods, goodsIndex) => {
          if (goods.goodsId === item.goodsId) {
            this.liveRoomApplyGoodsList.splice(goodsIndex, 1)
          }
        })
        this.$pt.setStorageSync('applyGoodsList', this.liveRoomApplyGoodsList)
        setTimeout(() => {
          this.$utils.showToast({ title: '操作成功' })
        }, 300)
      },
      tabClick(e) {
        if (e === 0) {
          this.$pt.redirectTo({url: '/pages/home/live-apply/basic-info/main'})
        }
      },
      timeCheck() {
        let info = {}
        if (this.$pt.getStorageSync('liveBasicInfo')) {
          info = this.$pt.getStorageSync('liveBasicInfo')
        }
        let currentTimer = new Date().getTime()
        let startTimer = this.$utils.formatTimeStamp(info.dateStartValue + ' ' + info.timeStartValue)
        let endTimer = this.$utils.formatTimeStamp(info.dateEndValue + ' ' + info.timeEndValue)
        if (startTimer <= (currentTimer + 10 * 60 * 1000)) {
          this.$utils.showToast({ title: '开播时间至少在10分钟后' })
          return false
        }
        if (startTimer >= endTimer) {
          this.$utils.showToast({ title: '开始时间应在结束时间之前' })
          return false
        }
        return true
      },
      submit() {
        let info = {
          liveRoomApplyGoodsList: []
        }
        if (this.$pt.getStorageSync('liveBasicInfo')) {
          info = this.$pt.getStorageSync('liveBasicInfo')
          info.liveRoomApplyGoodsList = []
        }
        info.liveRoomApplyGoodsList = this.liveRoomApplyGoodsList
        if (!info.roomName) return this.$utils.showToast({ title: '请输入直播标题' })
        if ((info.dateStartValue + info.timeStartValue) === '日期时间') return this.$utils.showToast({ title: '请选择开始时间' })
        if ((info.dateEndValue + info.timeEndValue) === '日期时间') return this.$utils.showToast({ title: '请选择结束时间' })
        this.timeCheck()
        if (!this.timeCheck()) return
        if (!info.anchorName) return this.$utils.showToast({ title: '请输入主播昵称' })
        if (!info.anchorWechat) return this.$utils.showToast({ title: '请输入主播微信号' })
        if (info.shareArrImg.length === 0) return this.$utils.showToast({ title: '请上传的分享图片' })
        if (info.coverArrImg.length === 0) return this.$utils.showToast({ title: '请上传的背景图片' })
        if (info.closeGoods === 1) return this.$utils.showToast({ title: '直播功能请选择商品货架' })
        if (!info.shareCopy) return this.$utils.showToast({ title: '请输入分享文案' })
        if (!this.liveRoomApplyGoodsList.length) return this.$utils.showToast({ title: '请添加商品' })
        info.memberId = this.getCustomerId
        info.applyStatus = 0
        const that = this
        this.$pt.showModal({
          title: '温馨提示',
          content: '确认提交店播申请？',
          success(res) {
            if (res.confirm) {
              saveLiveRoomApply(info).then((response) => {
                if (response.isError) return
                if (response.code === 101) {
                  that.$pt.removeStorageSync('liveBasicInfo')
                  that.$pt.removeStorageSync('applyGoodsList')
                  that.$pt.navigateBack({ delta: -2 })
                }
              }).catch(() => {
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.container{
  background: #fff;
  min-height: calc(100vh);
  .top-tabs{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    background: #fff;
    ul{
      border-bottom: #f4f4f4 1px solid;
      border-top: #e9e9e9 1px solid;
      li{        
        div{
          height: 40px;
          position: relative;
          color: #999;
          &.actived{
            color: #333;
          }
          &.actived:after{
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 60px;
            height: 2px;
            margin-left: -30px;
            background: #333;
          }
        }
      }
    }
  }
  .goods-content{
    p{
      margin: 0;
      padding: 19px 0 8px;
      font-size: 11px;
      color: #999;
      line-height: 1.3;
    }
    .list{
      li{
        .goods-img{
          border-radius: 10px;
        }
        .line-2{
          height: 36px;
        }
        .price-bar{
          color: #E84747;
          justify-content: space-between;
          .remove-btn{
            background: #E8E8E8;
            font-size: 20rpx;
            border-radius: 20rpx;
            color: #333333;
            padding: 4rpx 30rpx;
          }
        }
      }
    }
  }
  .add-goods-btn {
    z-index: 100;
    position: fixed;
    bottom: 85px;
    right: 22px;
    background: #222;
    color: #fff;
    border-radius: 100px;
    display: inline-block;
    padding: 0 19px;    
    div{
      height: 32px;
    }
  }
  .upload-bar{
    min-height: 82px;
    padding: 13px 0 30px;
  }
  .submit-footer{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  .submit-btn{
    width: 66%;  
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #ffe200;
    color: #333;
    font-size: 16px;
    border-radius: 0;
    &:after{
      border: unset;
    }
  }
  .back-btn{
    width: 34%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #fff;
    color: #333;
    font-size: 16px;
    border-radius: 0;
    &:after{
      border: unset;
    }
  }
  .nodata{
    padding-top: 100px;
    .apply-btn{
      width: 155px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-radius: 17px;
      background: #ffe200;
      margin: 80px auto 0;
      font-weight: bold;
    }
  }
}
</style>
